<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h2>localStorage</h2>
        <button onclick="saveData()">点我保存一个数据</button>
        <button onclick="readData()">点我读取一个数据</button>
        <button onclick="delData()">点我删除一个数据</button>
        <button onclick="delAllData()">点我清空一个数据</button>
        <script>
            function saveData(){
                // window可以省略
                // window.localStorage.setItem('msg','hello')

                var p = {name:'张三',age:18,sex:'男'}
                localStorage.setItem('msg','hello');
                localStorage.setItem('msg2',6666);
                //  JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
                localStorage.setItem('person',JSON.stringify(p));//转换成字符串
            }
            let readData = () =>{
                console.log(localStorage.getItem('msg'));
                console.log(localStorage.getItem('msg2'));
                const result = localStorage.getItem('person');
                console.log(JSON.parse(result));//JSON.parse() 方法将数据转换为 JavaScript 对象。
            }
            function delData(){
                localStorage.removeItem('msg2')
            }
            function delAllData(){
                localStorage.clear()
            }

            /* 
                ## webStorage
                    1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
                    2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
                    3. 相关API：
                        1. ```xxxxxStorage.setItem('key', 'value');```
                                            该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
                        2. ```xxxxxStorage.getItem('person');```
                            ​		该方法接受一个键名作为参数，返回键名对应的值。
                        3. ```xxxxxStorage.removeItem('key');```
                            ​		该方法接受一个键名作为参数，并把该键名从存储中删除。
                        4. ``` xxxxxStorage.clear()```
                            ​		该方法会清空存储中的所有数据。
                    4. 备注：
                        1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
                        2. LocalStorage存储的内容，需要手动清除才会消失。
                        3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。
                        4. ```JSON.parse(null)```的结果依然是null。
            */
        </script>
    </body>
</html>